<template>
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <button class="btn btn-primary">测试按钮</button>
            </div>
            <div class="col-md-6">
                <button class="btn btn-primary">测试按钮</button>
            </div>
        </div>
        <h1 v-html="ename"></h1>
        <h1 v-html="this.$store.getters.getName"></h1>
        <h1>{{ getName }}</h1>
        <input v-model="value1" />
        <button @click="aaa">设置</button>
        <router-view></router-view>
    </div>
</template>
<script>
import {mapGetters, mapMutations, mapActions} from 'vuex'
export default {
    computed: {
        ...mapGetters(["getName"])
    }
    ,
    name: 'test3',
    created() { // 钩子， 生命周期
        this.ename = this.$store.getters.getName
    },
    data: function() {
        return { 
            ename: '',
            value1: ''
        }
    },
    methods: {
        aaa() {
            // this.$store.commit("setName", this.value1)
            // this.setName(this.value1)

            // actions的调用
            // this.$store.dispatch("asyncSetName", this.value1)
            this.asyncSetName(this.value1)
        },
        ...mapMutations(['setName']),
        ...mapActions(['asyncSetName'])
        
    }
}
</script>
<style scoped>
.show {
    display: block;
}
.hide {
    display: none;
}
.red {
    color: red;
}
</style>

